<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleClose" title="个人详细信息" width="580px">
      <el-form :model="data">
        <el-form-item :label-width="formLabelWidth" label="用户名">
          <el-input :disabled="true" v-model="data.nickName" style="width:350px;"/>
          <el-button type="text" @click="handleClickPush(data.id)">个人主页</el-button>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="Email">
          <el-input :disabled="true" v-model="data.email" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户组">
          <el-input :disabled="true" v-model="data.roles" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="注册时间/IP">
          <el-input :disabled="true" v-model="data.createTimeAndIp" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="最近登录时间/IP">
          <el-input :disabled="true" v-model="data.loginTimeAndIp" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="姓名">
          <el-input :disabled="true" v-model="data.name" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="性别">
          <el-input :disabled="true" v-model="data.gender" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份证号">
          <el-input :disabled="true" v-model="data.idCard" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="手机号码">
          <el-input :disabled="true" v-model="data.verifiedMobile" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="公司">
          <el-input :disabled="true" v-model="data.company" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="职业">
          <el-input :disabled="true" v-model="data.profession" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="头衔">
          <el-input :disabled="true" v-model="data.title" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="个人签名">
          <el-input :disabled="true" v-model="data.signature" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="自我介绍">
          <el-input :disabled="true" v-model="data.description" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="个人网站">
          <el-input :disabled="true" v-model="data.website" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="微博">
          <el-input :disabled="true" v-model="data.weibo" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="微信">
          <el-input :disabled="true" v-model="data.weixin" style="width:350px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="QQ">
          <el-input :disabled="true" v-model="data.qq" style="width:350px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    visiabledialog: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formLabelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
    }
  },
  computed: {
    dialog() {
      return this.visiabledialog
    },
    data() {
      const data = Object.assign({}, this.dialogData)
      let createTimeStr = ''
      if (this.dialogData.createTime) createTimeStr = new Date(this.dialogData.createTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
      if (!createTimeStr && !this.dialogData.createdIp) {
        data.createTimeAndIp = '--'
      } else {
        data.createTimeAndIp = createTimeStr + ' / ' + this.dialogData.createdIp
      }
      let loginTimeStr = ''
      if (this.dialogData.loginTime) loginTimeStr = new Date(this.dialogData.loginTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
      if (!loginTimeStr && !this.dialogData.loginIp) {
        data.loginTimeAndIp = '--'
      } else {
        data.loginTimeAndIp = loginTimeStr + ' / ' + this.dialogData.loginIp
      }
      if (data.gender === '1') data.gender = '男'
      if (data.gender === '0') data.gender = '女'
      if (this.dialogData.nickName) {
        return data
      } else {
        if (this.dialogData.username) {
          data.nickName = this.dialogData.username
          return data
        } else if (this.dialogData.creator) {
          data.nickName = this.dialogData.creator
          return data
        } else if (this.dialogData.author) {
          data.nickName = this.dialogData.author
          return data
        } else if (this.dialogData.userId) {
          data.nickName = this.dialogData.userId
          return data
        }
      }
      return data
    }
  },

  methods: {
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('changeVisiable', false)
    },
    handleClose() {
      this.$emit('changeVisiable', false)
    },
    handleClickPush() {
      // 跳转到门户个人主页
      console.log(this.data.id)
    }
  }
}
</script>

<style lang="scss">
</style>
